// JS 

// 获取被点击的元素
var spanBtn = document.querySelector(".big_box_top span");


// 获取学生名单
var studyName = [
    '安雅丽', '鲍芷茉', '常毅哲', '陈骏泽', '陈如萱', "陈睿博", "陈雅洁", '陈雨欣', ' 崔姝乐', ' 崔孝哲', ' 崔芷馨 ', '董林轩 ', '杜暮雪 ', '范瑾怡', ' 方宇哲', ' 方子恒 ', '高笑笑', ' 葛欣辰 ', '何增增', ' 胡洋洋 ', '贾亿周', ' 焦天乐 ', '李建飞', ' 李靖涵 ', '李艺杨 ', '李煜 ', '梁启航', '刘美汐', '刘旭洋', ' 刘允泽', ' 马淑睿', ' 马艺珊 ', '马逸凡', ' 年清 ', '邱昕泽 ', '邵宇哲', ' 宋旭乐', ' 苏梓凡', '孙昊宝', ' 孙怀龙', ' 孙诗晗', ' 孙紫嫣', ' 汤宏冉', ' 唐禹宸', ' 腾佳慧', ' 汪铭涵', ' 王辰浩', ' 王思雨', '(大)王欣怡', ' 王欣怡', ' 王奕然', ' 王允锦馨', ' 吴俊杉', ' 许明涵', ' 杨婧', ' 杨蓉蓉 ', '杨欣彤', ' 杨振宇', ' 姚鑫驰', ' 易心雨 ', '尹馥雅', ' 张雨泽', ' 赵豪', ' 赵紫欣 ', '周佳怡', ' 周世成', ' 朱子清', ' 孙童童',
];

// 随机打乱顺序
studyName.sort(function () {
    return 0.5 - Math.random();
});

// 设置 开关 记录 使用
var flag = true;
// 抽取个数
var count = 1;
spanBtn.innerText = '点击随机抽取 ' + count + ' 项';
// 注册点击事件
spanBtn.addEventListener("click", function () {
    // 点击之后要做的事情
    // 第一件事 修改被点击按钮的 文案
    if (flag) {
        // 修改文案
        this.innerText = "确认选择";
        // 添加选择类
        this.className = "spanClickCur";
        // 开启滚动
        randomNumber(nodeList.length, 0, count, flag); // 产生了 6位不重复的随机数
        // 调整开关
        flag = false;
        // 
    } else {
        this.innerText = '点击随机抽取 ' + count + ' 项';
        this.className = "";
        // 关闭滚动
        randomNumber(nodeList.length, 0, count, flag); // 产生了 6位不重复的随机数
        flag = true;
    }

})


// 获取将要被插入的元素
var ul = document.querySelector(".name_list .nameList_this");
//  置入 产生的li 也就是学生名单
function setStudyName(inserNode, chiNodeName, numberArr) {
    // inserNode 父元素  chiNode 子元素  number 需要产生的个数
    // 产生指定个 数的 li
    for (var a = 0; a < numberArr.length; a++) {
        // 创建一个自定义的元素
        var userNode = document.createElement(chiNodeName);
        // 插入到指定节点中
        inserNode.appendChild(userNode);
        // 赋值
        userNode.innerText = numberArr[a];
    }
}
// 调用 函数 来产生 学生名单
setStudyName(ul, "li", studyName)
// 获取需要被插入的 值。
var showOl = document.querySelector(".showArr ol");

var showSpan = document.querySelector(".showArr ol li span");
// 产生六位重复随机数 范围是 0 - 参数数组的长度 不刷新就不断产生需要启动定时器
var startEn = null; //  记录定时器
function randomNumber(max, min, numArr, closeM) {
    // max 随机数最大值 min 最小值 numArr 随机数个数 closeM 关闭定时器
    clearInterval(startEn);
    // 0.5S 产生一次随机数
    var num2;
    startEn = setInterval(function () {
        // 创建2个空数组保存随机数
        var num1 = [];
        num2 = [];
        for (var a = 0; a < max; a++) {
            num1.push(a);
        }

        for (var k = 0; k < numArr; k++) {
            // 保存 生成的随机数
            var numRandom = Math.floor(Math.random() * (max - min) + min);

            if (num2.indexOf(num1[numRandom]) === -1) {
                num2.push(num1[numRandom]);
            } else {
                k = k - 1;
                continue;
            }
        }
        //  启动 选择
        selectName(num2, "cur");
        // 判断 用户点击 是什么  在定时器内部清除定时器 外部 直接终止
        if (!closeM) {
            clearInterval(startEn);
        }
    }, 100);


}
var nodeList = document.querySelectorAll("ul li") //获取 已经生成的元素


// console.log(getRandom);

// 突出被选中的 6位 同学
function selectName(rondomArr, cur) {
    //  dataArr 学生名单数组  rondomArr 选重的数组
    // 这个循环是清除 数组中被选中的状态
    for (var b = 0; b < nodeList.length; b++) {
        nodeList[b].className = "";
    }
    //这个循环选重6位随机的同学
    for (var a = 0; a < rondomArr.length; a++) {
        // 使用随机数数组的 值给到 名单数组
        // nodeList[a].className = cur;
        nodeList[rondomArr[a]].className = cur;
    };
}
// 需要这个随机数变成引擎 不断在 产生随机数

// 处理被选中数据 置入到 列表中 并删除 节点




